<template>
  <div class="approval-list">
    <el-card>
      <template #header>
        <span>预约审批</span>
      </template>
      <el-table :data="approvalList" style="width: 100%">
        <el-table-column prop="roomName" label="会议室" width="120" />
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="startTime" label="开始时间" width="100" />
        <el-table-column prop="endTime" label="结束时间" width="100" />
        <el-table-column prop="purpose" label="用途" />
        <el-table-column prop="applicant" label="申请人" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleApprove(scope.row)" :disabled="scope.row.status !== 'pending'">通过</el-button>
            <el-button size="small" type="danger" @click="handleReject(scope.row)" :disabled="scope.row.status !== 'pending'">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const approvalList = ref([
  { id: 1, roomName: '会议室A', date: '2024-06-01', startTime: '09:00', endTime: '10:00', purpose: '项目讨论', applicant: '张三', status: 'pending' },
  { id: 2, roomName: '会议室B', date: '2024-06-02', startTime: '14:00', endTime: '15:00', purpose: '客户会议', applicant: '李四', status: 'pending' },
  { id: 3, roomName: '会议室A', date: '2024-06-03', startTime: '11:00', endTime: '12:00', purpose: '团队例会', applicant: '王五', status: 'confirmed' },
])

const getStatusType = (status: string) => {
  const types: Record<string, string> = {
    pending: 'warning',
    confirmed: 'success',
    completed: 'info',
    cancelled: 'danger',
    rejected: 'danger'
  }
  return types[status] || 'info'
}
const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    pending: '待审批',
    confirmed: '已通过',
    completed: '已完成',
    cancelled: '已取消',
    rejected: '已拒绝'
  }
  return texts[status] || '未知'
}
const handleApprove = (row: any) => {
  ElMessageBox.confirm('确定通过该预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  }).then(() => {
    row.status = 'confirmed'
    ElMessage.success('已通过')
  })
}
const handleReject = (row: any) => {
  ElMessageBox.confirm('确定拒绝该预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = 'rejected'
    ElMessage.success('已拒绝')
  })
}
</script>

<style scoped lang="scss">
.approval-list {
  padding: 20px;
}
</style>